<template>
	<view class="container">
		<view class="cu-card" style="min-height: 500px;">
			<view class="reg_box">
				<view class="reg_box_bg"></view>
				<view class="cu-form-group margin-lr-lg border-b-line padding-0">
					<view class="title">收货人姓名</view>
					<input data-key="name" focus placeholder="请输入" v-model="name" />
				</view>		
				<view class="cu-form-group margin-lr-lg border-b-line padding-0">
					<view class="title">手机号码</view>
					<input data-key="phone" focus placeholder="请输入" v-model="phone" />
				</view>
				<view class="cu-form-group margin-lr-lg border-b-line padding-0">
					<view class="title">收货地址</view>
					<input data-key="bankcard" focus placeholder="请输入" v-model="addressData.address" />
<!--					<text class="cuIcon-locationfill text-blue" @tap="openPicker"></text>-->
				</view>
				<view class="cu-form-group margin-lr-lg border-b-line padding-0">
					<view class="title">门牌号码</view>
					<input data-key="details" focus placeholder="街道或楼牌号等" v-model="details"  />
				</view>
				<view class="cu-form-group margin-lr-lg padding-0">
					<view class="title">默认地址</view>
					<switch :class="[isChecked ? 'blue checked' : 'blue']" :checked="isChecked" @change="switchChange" />
				</view>
			</view>
			<view class="cu-form-group margin-lr-lg padding-0 submit_btn">
				<button class="cu_btn" type="button" @click="updateData">保存</button>
			</view>
		</view>
		<!-- <view class="cu-form-group">
			<view class="title">收货姓名</view>
			<input focus placeholder="请填写收货人姓名" v-model="name" />
		</view>
		<view class="cu-form-group">
			<view class="title">手机号码</view>
			<input focus placeholder="请填写收货人手机号码" v-model="phone" />
		</view>
		<view class="cu-form-group">
			<view class="title">收货地址</view>
			<input focus placeholder="XX省XX市XX区" v-model="addressData.address" />
			<text class="cuIcon-locationfill text-orange" @tap="openPicker"></text>
		</view>
		<view class="cu-form-group">
			<view class="title">门牌号码</view>
			<input focus placeholder="街道或楼牌号等" v-model="details" />
		</view>
		<view class="cu-form-group">
			<view class="title">默认地址</view>
			<switch :class="[isChecked ? 'red checked' : 'red']" :checked="isChecked" @change="switchChange" />
		</view>
		<view class="cu-form-group margin-lr-lg padding-0 submit_btn">
			<button class="cu-btn" type="button" @click="updateData">保存</button>
		</view>
		<view class="margin-lg padding-0" v-if="address_id > 0">
			<button class="cu-btn line-red text-red" type="button" @click="delAddress" v-if="address_id > 0">删除</button>
		</view> -->
		            <!-- 省市区选择 province city area初始省市区设置 show:是否显示  @sureSelectArea：确认事件 @hideShow：隐藏事件-->
		            <cc-selectDity :province="province" :city="city" :area="area" :show="show" @changeClick="changeClick"
		                @sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				phone:'',
				area:'',
				details:'',
				isChecked:false,
				type:'',
				address_id:0,
				addressInfo:[],
				userinfo:[],
				colors: '#f23a3a',
				show: false,
				province: "广东省",
				city: "广州市",
				area: "天河区",
				areaCode: "440106",
				addressData: {
					name: '',
					phone: '',
					address: '',
					moreAddres: '',
					isdefult: 0
				},
				isShow: true				
			};
		},
		onLoad: function (option) {
			this.helper.checkLogin();
			this.getData();
			
			this.type = option.type;
			if(this.type == 'add'){
				uni.setNavigationBarTitle({
					title: '新增收货地址'
				});
			}
			if(this.type == 'edit'){
				uni.setNavigationBarTitle({
					title: '编辑收货地址'
				});
				this.address_id = option.address_id;
				this.getAddressInfo();
			}
		},
		onNavigationBarButtonTap(val) {
			this.updateData();
		},
		methods: {
			openPicker() {
				console.log('执行打开地址选择器')
				this.show = true
			},

			changeClick(value, value2, value3, value4) {

				console.log('地址选择器 = ' + value + value2 + value3 + value4);

				this.province = value;
				this.city = value2;
				this.area = value3;
				this.areaCode = value4;
				//this.areadata = value + value2 + value3;
			},
			onhideShow() {
				this.show = false
				console.log('执行了关闭地址选择器')
			},
			//选中省市区
			onsetCity(e) {
				let data = e.detail.target.dataset;
				let address = data.province + data.city + data.area;
				this.show = false
				this.addressData.address = address
			},			
			switchChange: function (e) {
				this.isChecked = e.detail.value;
			},
			//地图选择地址
			chooseLocation:function(){
				uni.chooseLocation({
					success: (data)=> {
						// console.log(data)
						this.area = data.address;
					}
				})
			},
			getData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getUserInfo",
					timestamp:timestamp,
					data:{username:info.username,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.userinfo = res.data.data.userinfo;
					uni.hideLoading();
					
					if(this.userinfo.auth == 0){
						uni.showModal({
							title: "提示",
							content: '帐户未实名，现在实名？',
							showCancel:false,
							confirmText: "现在实名",
							success:function(res){
								if(res.confirm){
									uni.navigateTo({
										url: "/pages/user/certification"
									})
								}
							}
						})
					}
				})
			},
			getAddressInfo:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['address_id='+this.address_id,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getAddressInfo",
					timestamp:timestamp,
					data:{address_id:this.address_id,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.addressInfo = res.data.data.addressInfo;
					this.name = this.addressInfo.name;
					this.phone = this.addressInfo.phone;
					this.addressData.address = this.addressInfo.area;
					this.details = this.addressInfo.details;
					this.isChecked = this.addressInfo.is_default == 1 ? true : false;
					
					uni.hideLoading();
				})
			},
			updateData:function(){
				if(this.name == ''){
					uni.showToast({
						title:"请填写收货人姓名",
						icon:"none"
					})
					return;
				}
				if(this.phone == ''){
					uni.showToast({
						title:"请填写收货人手机号码",
						icon:"none"
					})
					return;
				}
				if(this.area == ''){
					uni.showToast({
						title:"请填写收货地址",
						icon:"none"
					})
					return;
				}
				if(this.details == ''){
					uni.showToast({
						title:"请填写街道或楼牌号等",
						icon:"none"
					})
					return;
				}
				//获取基础参数
				uni.showLoading({
					title:"数据更新中",
					mask:true
				})
				var info = uni.getStorageSync("userinfo");
				var is_default = this.isChecked ? 1 : 0;
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['type='+this.type,'is_default='+is_default,'address_id='+this.address_id,'name='+this.name,'phone='+this.phone,'area='+this.addressData.address,'details='+this.details,'timestamp='+timestamp,'token='+info.token]);
				this.helper.req({
					api:"saveAddress",
					timestamp:timestamp,
					data:{type:this.type,is_default:is_default,address_id:this.address_id,name:this.name,phone:this.phone,area:this.addressData.address,details:this.details,token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					uni.hideLoading();

					uni.showToast({
						title: "地址保存成功",
						icon: "success"
					})

					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/address/index',
						});	
					}, 300);
				})
			},
			delAddress:function(){
				var that = this;
				uni.showModal({
					title: "提示",
					content: "确认删除地址？",
					showCancel: true,
					confirmText: "确定",
					success:function(res){
						if(res.confirm){
							uni.showLoading({
								title:"数据删除中",
								mask:true
							})
							var info = uni.getStorageSync("userinfo");
							let timestamp = that.helper.now();
							let sign = that.helper.setSign(['address_id='+that.address_id,'token='+info.token,'timestamp='+timestamp]);
							that.helper.req({
								api:"delAddress",
								timestamp:timestamp,
								data:{address_id:that.address_id,token:info.token},
								header:{sign:sign},
								method:'POST',
							}).then(res=>{
								uni.hideLoading();
								if(res.data.errorcode>0){
									uni.showToast({
										title:res.data.message,
										icon:"none"
									})
									return;
								}else{
									uni.showToast({
										title: "地址删除成功",
										icon: "success"
									})
									
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/address/index',
										});	
									}, 300);
								}
								
							})
						}
					}
				})
			},
			//链接
			toUrl:function(url){
				// console.log(url);
				uni.navigateTo({
					url: url,
				});	
			},
		},
	};
</script>

<style lang="scss">
	page {
		// background-image: url('@/static/images/person/center-bg.png');
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		color: #56595d;
		background-color: #ddeafd;
		height:100%;
	}
	.reset_title{
		font-size: 50upx;
		padding: 20upx;
	}
	.cu-form-group{
		background: none;
		height: 60px;
		input{
			color:#353535;
			text-align: right;
		}
		.text-blue{
			color: #4079ff;
		}
	}
	.cu-form-group .title {
		min-width: 200upx;
		color: #353535;
	}
	.logo{
		padding: 80px 0 50px;
		text-align: center;
		image{
			width: 100px;
			height: 100px;
		}
	}
	.lg_img{
		width: 24px;
		height: 24px;
	}
	.reg_box{
		margin: 6vw 3vw;
		padding: 8px 0;
		// background: #ffffff;
		border-radius: 6px;
		position: relative;
		
		.reg_box_bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: #fff;
			border-radius: 10px;
		}
	}
	.cu_btn{
		background: linear-gradient( 180deg, #9dc1ff 0%, #508ffd 100%);
		height: 50px;
		width: 70vw;
		color: #fff;
		line-height: 50px;
		font-size: 16px;
		border-radius: 30px;
	}
</style>
